<template>
	<view class="container">
		<view class="top">
			
			<scroll-view v-for="(item,index) in list" :key="item.id" class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view class="cartInfo" id="demo1">
					<!-- 购物车商品信息 -->
					<view class="cartInfochild">
						<!-- 选择框 -->
						<view class="cartInfo_switch common">
							<!-- 点击当前商品 -->
							<switch type="checkbox" :checked="item.checked" @click="aCheck(index)" />
						</view>
						<!-- 图片 -->
						<view class="cartInfo_image common"><image :src="baseUrl+item.img"></image></view>

						<!-- 信息 -->
						<view class="cartInfo_info">
							<label for="" style="font-size: 26rpx;">{{item.goodsname}}</label>
							<label for="" style="font-size: 24rpx; color: #ccc;">规格：黑色</label>
							<label for="" style="color: red;">￥{{item.price}}</label>
						</view>
						<!-- 加减数量 -->
						<view class="cartInfo_num">
							<view class="cartInfo_num_child">
								<label for="" @click="reudce(index)">-</label>
								<label for="">{{item.num}}</label>
								<label for="" @click="add(index)">+</label>
							</view>
						</view>
					</view>
				</view>
				<view class="cartDel" id="demo2"><label for="" @click="del(index)">删除</label></view>
			</scroll-view>
	
		</view>

		<!-- 底部 -->
		<view class="foot">
			<view class="footd1">
				<switch type="checkbox" :checked="allChecked" @click="checkedAll" />
				<label>全选</label>
			</view>
			<view class="footd2">
				<view class="footd2sp1">
					总计：
					<label style="color: red;">{{totalPrice}}</label>
				</view>
				<label class="footd2sp2">不含运费，已优惠￥0.00</label>
			</view>
			<!-- 跳到提交订单，结算页面 -->
			<view class="footd3">
				<!-- 被选中的商品的个数 -->
				<label @click="goMoney">去结算({{allNum}}件)</label>
			</view>
		</view>
	</view>
</template>

<script>
import {baseUrl} from "../../utils/config.js";
export default {
	data(){
		return{
			list:[],
			baseUrl:baseUrl	
		}
	},
	

	//渲染购物车页面
	async onShow() {
		
		var userInfo = uni.getStorageSync("userInfo");
		// console.log(userInfo);
		let {uid,token} = userInfo;
			
		if(uid&&token){
			var result = await this.http("/api/cartlist",{uid},token).catch(err=>{
			console.log(err);
		})
		// console.log(result);
		var list = result.data.list
		if(list==null){
			return
		}
		//list里面的每一项checked的值为0或1，CheckBox选择框识别布尔值，所以将其转化为布尔值
		list.forEach(item=>{
			item.checked = item.checked==1?true:false
		})
		// console.log(list);
		this.list = list
		}else{
			uni.navigateTo({
				url:"/pages/send/send"
			})
		}
		
	},
	computed:{
		totalPrice:function(){
			var result = 0;
			this.list.forEach(item=>{
				if(!item.checked){
					return
				}
				var price = item.price*item.num
				result+=price
			})
			return result
		},
		allNum:function(){
			var nums = 0;
			this.list.forEach(item=>{
				if(!item.checked){
					return
				}
				nums += item.num
			})
			return nums
		},
		allChecked:{
			//通过购物车里面列表中的选项框来控制下面的全选框按钮
			get:function(){
				var result = this.list.every(item=>{
					return item.checked == true
				})
				return result
			},
			set:function(val){
				// console.log(val,"-----");
				this.list.forEach(item=>{
					item.checked=val
				})
			}
			
		}
	},
	
	methods:{
		checkedAll(){
			// console.log(!this.allCheck,"----------");
			this.allChecked = !this.allChecked;
		},
		//点击单选
		aCheck(index){
			this.list[index].checked = !this.list[index].checked;
			this.editCur(index);
		},
		//商品点击添加数量
		add(index){
			// 页面num增加
			this.list[index].num+=1;
			//数据库num增加
			this.editCur(index);
		},
		//商品点击数量减少
		reudce(index){
			//1.页面num减少
			if(this.list[index].num<=1){
				this.list[index].num=1;
				return
			}
			this.list[index].num-=1;
			//2.数据库num减少
			this.editCur(index);
		},
		async editCur(index){
			let {id,num,checked} = this.list[index]
			// console.log(this.list[index]);
			checked=checked==true?1:0;
			let data = {id,num,checked}
			let {token} = uni.getStorageSync("userInfo")
			// console.log(data);
			var result = await this.http("/api/cartedit",data,token).catch(err=>{
				console.log(err);
			})
			// console.log(result)
		},
		//删除按钮
		async del(index){
			// console.log(this.list[index]);
			//删除数据库中内容
			var id = this.list[index].id
			var {token} = uni.getStorageSync("userInfo")
			var result = await this.http("/api/cartdelete",{id},token).catch(err=>{
				console.log(err);
			})
			console.log(result);
			//删除页面的数据
			this.list.splice(index,1);
		},
		//点击去结算
		goMoney(){
			var list = this.list.filter(item=>{
				return item.checked==true;
			})
			console.log(list);
			uni.setStorageSync("moneyList",list)
			//页面跳转
			uni.navigateTo({
				url:"/pages/confirm/confirm"
			})
		}
	}
}	

</script>
	
<style>
@import url('../../common/css/cart.css');
.cartInfo_image_img {
	width: 120rpx;
	height: 120rpx;
}
</style>
